<ng-container [formGroup]="form">
	<div cdkDrag cdkDragHandle
		 cdkDragRootElement=".cdk-overlay-pane"
		 mat-dialog-title>
		<div>
			<h3>New table in <i>{{ selectedDatabase.name }}</i></h3>
		</div>

		<button aria-label="close dialog" mat-dialog-close mat-icon-button>
			<span class="material-symbols-outlined notranslate">close</span>
		</button>
	</div>

	<mat-dialog-content style="display: flex; flex-direction: column">
		<mat-form-field appearance="fill" style="padding: 0px 12px; flex: 1; margin-bottom: -1.25em;">
			<mat-label>Table Name</mat-label>
			<input
				autocomplete="off"
				formControlName="name"
				matInput>
			<mat-error *ngIf="form.get('name')?.errors && form.get('name')!.errors!['pattern']">
				Prefer [alpha, numeric, "_", "-"] with 2 min chars
			</mat-error>
			<mat-error *ngIf="form.get('name')?.errors && form.get('name')!.errors!['unique']">
				Name already used
			</mat-error>
		</mat-form-field>

		<app-column [form]="form"></app-column>
	</mat-dialog-content>

	<mat-dialog-actions>
		<button (click)="addColumn()"
				*ngIf="!form.get('old')"
				color="primary"
				mat-stroked-button>
			<span class="material-symbols-outlined notranslate">
				add
			</span>
			Column
		</button>

		<a *ngIf="selectedServer"
		   [href]="selectedServer!.driver.docs.types"
		   mat-button
		   target="_blank">
			<span class="material-symbols-outlined notranslate">
				help
			</span>
			{{ selectedServer.wrapper }} Types
		</a>

		<button
			(click)="create()"
			[disabled]="!form.valid"
			cdkFocusInitial
			color="primary"
			mat-flat-button>
			<span class="material-symbols-outlined notranslate">
				table
			</span>
			Create table
		</button>
	</mat-dialog-actions>
</ng-container>
